<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>基本代码执行流程</title>
  <!-- 
  JavaScript 的基本代码执行流程是理解 JavaScript 运行机制的基础，涉及到代码的解析、编译、执行等多个阶段。
  1. 代码解析
  在执行 JavaScript 代码之前，JavaScript 引擎会先对代码进行解析。这个过程包括以下几个步骤：
  - 词法分析（Lexical Analysis）：将代码分解成一个个的词法单元（Token），如关键字、标识符、运算符、分隔符等。
  - 语法分析（Syntax Analysis）：根据语言的语法规则，将词法单元组合成抽象语法树（AST，Abstract Syntax Tree），表示代码的结构。

  2. 编译
  在现代 JavaScript 引擎中，代码解析完成后，会进行编译。编译过程将抽象语法树转换为字节码或机器码，以便于执行。编译通常是即时（Just-In-Time，JIT）进行的，这意味着代码在执行时才被编译。

  3. 执行上下文
  在执行代码时，JavaScript 引擎会创建执行上下文（Execution Context）。每个执行上下文包含以下信息：
  - 变量环境（Variable Environment）：存储变量的值。
  - 作用域链（Scope Chain）：用于查找变量的链条。
  -  `this`  值：指向当前执行上下文的对象。

  4. 执行阶段
  在执行阶段，JavaScript 引擎会按照以下步骤执行代码：
  - 创建全局执行上下文：当 JavaScript 代码开始执行时，首先会创建一个全局执行上下文。
  - 执行代码：引擎逐行执行代码，处理变量声明、函数调用、条件语句等。
    - 变量提升：在执行代码之前，JavaScript 会提前处理变量声明（但不会提升赋值）。
    - 函数调用：当调用函数时，会创建一个新的执行上下文，并将其推入执行栈中。
  - 垃圾回收：在执行过程中，JavaScript 引擎会自动管理内存，清理不再使用的变量和对象。

  5. 事件循环
  JavaScript 是单线程的，但它使用事件循环（Event Loop）机制来处理异步操作。事件循环的工作流程如下：
  - 执行栈（Call Stack）：存放当前正在执行的代码。
  - 任务队列（Task Queue）：存放待执行的异步任务（如定时器、网络请求等）。
  - 事件循环：不断检查执行栈是否为空，如果为空，则从任务队列中取出一个任务并执行。

  6. 总结
  JavaScript 的基本代码执行流程包括代码解析、编译、执行上下文的创建和执行、以及事件循环机制。理解这些流程有助于更好地掌握 JavaScript 的运行机制、作用域、闭包、异步编程等概念，从而编写出更高效和可维护的代码。
   -->
</head>
<body>
  
  <script>
    // 1. 变量提升
    console.log(a); // undefined
    var a = 1;
    console.log(a); // 1

    // 2. 函数提升
    console.log(b); // undefined
    var b = function () {
      console.log(2);
    };
    console.log(b); // [Function: b]

    // 3. 函数提升优先级高于变量提升
    console.log(c); // [Function: c]
    var c = 1;
    function c() {
      console.log(2);
    }

    // 4. 执行阶段
    var d = 1;
    function d() {
      console.log(2);
    }
    console.log(d); // 1

    // 5. 事件循环
    setTimeout(function () {
      console.log("Hello, World!");
    }, 1000);

    console.log("JavaScript");

    // 6. 垃圾回收
    var e = { name: "Alice" };
    var f = e;
    e = null;
    console.log(f); // { name: "Alice" }

    // 7. 闭包
    function outer() {
      var a = 1;
      function inner() {
        console.log(a);
      }
      return inner;
    }
    var closure = outer();
    closure(); // 1

  </script>
  
</body>
</html>